

<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-21 14:36:35
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-30 09:28:01
-->
<template>
  <div class="p-4">
    <!-- 进度条 -->
    <OrderProgress :record="record" />
    <!-- 订单信息 -->
    <OrderInfo class="mt-2" :record="record" />
    <!-- 商品信息 -->
    <GoodsInfo class="mt-2" :record="record" />
    <!-- 物流信息 -->
    <DeliveryInfo class="mt-2" :record="record" />
  </div>
</template>

<script setup lang="ts">
import {
  OrderDetailParam,
} from '/@/api/order/model/orderModel';
import { useRoute } from "vue-router";
import { useGo } from '/@/hooks/web/usePage';
import { orderDetail } from '/@/api/order';
import { onMounted, ref } from 'vue';
import { OrderRecordModel } from '../model';
import OrderProgress from './components/OrderProgress.vue';
import OrderInfo from './components/OrderInfo.vue';
import GoodsInfo from './components/GoodsInfo.vue';
import DeliveryInfo from './components/DeliveryInfo.vue';
const go = useGo();
const { params: { id } } = useRoute();
const record = ref<OrderRecordModel | any>({});

if (!id) go('/order')
// 请求订单详情的数据
let query = { orderId: id } as OrderDetailParam
async function getDetail() {
  const data = await orderDetail(query)
  record.value = data.detail
}
// 生命周期函数
onMounted(() => {
  getDetail()
})

</script>

<style lang="less" scoped>
.mt-2 {
  margin-top: 20px;
}
</style>